<template>
  <page-detail>
    <div style="padding: 10px">
      <van-skeleton :row="12" :loading="loading">
        <!-- 标题 -->
        <div class="title">{{ article.courseName }}</div>
        <!-- 标签 -->
        <div class="tags">
          <span>讲师:{{ article.teacherName }}</span>
          <span>手机号:{{ article.teacherPhone }}</span>
        </div>
        <!-- 日期 -->
        <div class="date">
          时间:{{ article.courseStartTime }} 至 {{ article.courseEndTime }}
        </div>
        <!-- 富文本内容 -->
        <rich-text class="content" :nodes="article.courseContent"></rich-text>
        <!-- 图片列表 -->
        <div class="image-list">
          <img
            :src="article.coursePublicityUrl"
            mode="aspectFill"
            class="image"
            @tap="$previewImage(article.coursePublicityUrl)"
          />
        </div>
      </van-skeleton>
    </div>
    <template #footer>
      <van-button
        round
        type="primary"
        class="action-btn"
        :disabled="article.courseStatus !== '1' || isSign"
        @click="submit"
        v-if="!isSign && (article.courseStatus !== '1' || isSign)"
      >
        报名
      </van-button>

      <van-button
        v-if="isSign && (article.courseStatus !== '1' || isSign) && !isQd"
        round
        type="primary"
        class="action-btn"
        @click.stop.prevent="singnHandler"
      >
        签到
      </van-button>
    </template>
    <activity-detail-submit
      ref="activity"
      appointment-type="3"
      :item-title="article.courseName"
      :item-index-code="article.indexCode"
      @success="search"
    />
  </page-detail>
</template>

<script>
import ArticleTag from '../../components/ArticleTag.vue'
import { tbContradictionDisputeList } from '../../api/tbContradictionDispute'
import { tbCourseList } from '../../api/tbCourse'
import ActivityDetailSubmit from '../djzh/components/ActivityDetailSubmit.vue'
import { Dialog, Toast } from 'vant'
import { tbAppointmentSave } from '../../api/tbAppointment'
import { mapGetters } from 'vuex'
import { searchApprovalstatus } from '../../api/tbMoralEducation'
import { putVideoAndImage } from '../../utils/utils'
import { signInStatus } from '../../api/flow'

export default {
  name: 'wx_pages_zhfw_courseDetail',
  components: { ActivityDetailSubmit, ArticleTag },
  data() {
    return {
      article: {},
      disputeName: '',
      loading: false,
      isSign: false,
      isQd: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    isBM() {},
  },
  methods: {
    singnHandler() {
      console.log(123123)
      this.$toPage(`/pages/signIn?id=${this.article.indexCode}&type=course`)
    },
    async search() {
      const { indexCode } = this.$route.query
      if (indexCode) {
        this.loading = true
        let res = await tbCourseList({ indexCode })
        this.loading = false
        uni.stopPullDownRefresh()
        if (res.data && res.data.length > 0) {
          this.article = res.data.pop()
          this.article.courseContent = putVideoAndImage(
            this.article.courseContent
          )
          signInStatus({
            indexCode,
            userId: this.userInfo.userId,
          }).then((res) => {
            this.isQd = res.data
          })
          searchApprovalstatus({
            indexCode,
            userId: this.userInfo.userId,
          }).then((res) => {
            this.isSign = res.data
          })
        } else {
          this.article = {}
        }
      }
    },
    submit() {
      const _this = this
      const { courseName, indexCode } = _this.article
      const formData = {
        appointmentType: '3',
        itemIndexCode: indexCode,
        appointmentUserId: _this.userInfo.userId,
        appointmentName: courseName,
        appointmentPersonName: _this.userInfo.personName,
        appointmentPhone: _this.userInfo.phone,
      }
      Dialog.confirm({
        title: '提示',
        message: '是否确认提交?',
      })
        .then(() => {
          _this.$showLoading('提交中...')
          tbAppointmentSave(formData)
            .then((res) => {
              if (res.code === '0') {
                _this.search()
                Toast.success('提交成功')
              } else {
                Toast.fail(res.msg)
              }
              _this.$hideLoading()
              _this.show = false
            })
            .catch(() => {
              _this.$hideLoading()
            })
        })
        .catch(() => {})
    },
  },
  onLoad() {
    this.search()
  },
}
</script>
<style lang="scss">
.title {
  font-size: 18px;
  font-weight: bold;
  color: $uni-color-primary;
  margin-bottom: 12px;
  line-height: 1.4;
}

.tags {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background: #68a67d;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 8px;
}
.date {
  font-size: 14px;
  color: #999;
  margin-bottom: 16px;
}

.content {
  margin-bottom: 16px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.image {
  width: 31%;
  height: 100px;
  border-radius: 4px;
}
</style>
